<template>
  <div id="app">
    <div class="flex">
      <div>
        <input type="text" @click="openByDialog" :value="calendar4.display" readonly>
      </div>
    </div>

    <transition name="fade">
      <div class="calendar-dialog" v-if="calendar4.show">
        <div class="calendar-dialog-mask" @click="closeByDialog"></div>

        <div class="calendar-dialog-body">
          <calendar
            :range="calendar4.range"
            :zero="calendar4.zero"
            :lunar="calendar4.lunar"
            :value="calendar4.value"
            @select="calendar4.select"
          ></calendar>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>

import calendar from '../plugins/calendarEle.vue'

export default {
  name: 'app',
  components: {
    calendar
  },
  data () {
    return {
      calendar4: {
        display: "2019/01/01 ~ 2019/01/31",
        show: false,
        range: true,
        zero: true,
        value: [[2019, 1, 1], [2019, 1, 31]], //默认日期
        lunar: true, //显示农历
        select: (begin, end) => {
          console.log(begin, end)
          this.calendar4.show = false;
          this.calendar4.value = [begin, end];
          this.calendar4.display = begin.join("/") + " ~ " + end.join("/");
        }
      },
    }
  },
  methods: {
    openByDialog () {
      this.calendar4.show = true;
    },
    closeByDialog () {
      this.calendar4.show = false;
    }
  }
}
</script>

<style>
/*demo*/
.flex {
  box-sizing: border-box;

  display: -webkit-box;
  -webkit-box-pack: start;
  -webkit-box-align: start;

  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: top;

  display: flex;
  justify-content: space-between;
  align-items: top;
  flex-flow: row wrap;
}
.flex > div {
  margin: 10px;
  padding: 20px;
  width: 25%;
  min-width: 300px;
  border: 1px solid #eee;
  border-radius: 2px;
  position: relative;
}
.flex > div > span {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 2px 10px;
  font-size: 10px;
  border-radius: 0 0 2px 0;
  background: #ea6151;
  color: #fff;
}
.flex > div > input {
  box-sizing: border-box;
  width: 100%;
  margin-top: 20px;
  border-radius: 2px;
  border: 1px solid #dedede;
  padding: 10px;
  font-size: 16px;
  background: url()
    no-repeat 8px 10px;
  padding-left: 36px;
  color: #666;
}

/*transition*/
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease-in-out;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
  transform: translateY(-10px);
}

/*下拉框*/
.calendar-dropdown {
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 2px;
}
.calendar-dropdown:before {
  position: absolute;
  left: 30px;
  top: -10px;
  content: "";
  border: 5px solid rgba(0, 0, 0, 0);
  border-bottom-color: #dedede;
}
.calendar-dropdown:after {
  position: absolute;
  left: 30px;
  top: -9px;
  content: "";
  border: 5px solid rgba(0, 0, 0, 0);
  border-bottom-color: #fff;
}

/*弹出框*/
.calendar-dialog {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.calendar-dialog-mask {
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
}

.calendar-dialog-body {
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 2px;
}
</style>